<template>
    <div class="question_chart" ref="RoadRank"></div>
</template>
<script>
import resize from '@/mixins/resize';
import echarts from 'echarts';
import {remoteRoadList} from '@/api/dashboard'

export default {
    name: 'RoadRank',
    mixins: [resize],
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initEchart();
        });
    },
    methods: {
        async initEchart() {
            let res = await remoteRoadList();
            let {data}=res;
            let showData = [];
            let labelData = [];
            data.map(item=>{
                for(let label in item){
                    labelData.push(label)
                    showData.push(item[label])
                }
            })
            const colors = ['#4499E4', '#00BB96', '#FAC858'];
            this.myChart = echarts.init(this.$refs.RoadRank);

            this.myChart.setOption(
                {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    color:colors,
                    grid: {
                        left: 0,
                        right: 0,
                        top: 20,
                        bottom: 0,
                        containLabel: true
                    },
                    legend: {
                        show:false,
                        top: 0,
                        left: 'left',
                        itemHeight: 4,
                        itemWidth: 7,
                        itemGap: 5,
                        textStyle: {
                            fontSize: 8,
                            color: '#fff'
                        },
                        selectedMode: false
                    },
                    xAxis: [
                        {
                            type: 'value',
                            axisTick: { show: false },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#1786EF'
                                }
                            },
                            axisLabel: {
                                show:false,
                                textStyle: {
                                    fontSize: 1
                                }
                            },
                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    yAxis: [
                        {
                            
                            type: 'category',
                            inverse: true,
                            data: labelData,
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#fff'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick:{
                                show:false,
                            },
                            axisLabel: {
                                show:true,
                                textStyle: {
                                    fontSize: 10
                                }
                            },
                        }
                    ],
                    series: [
                        {
                            name: '排行',
                            type: 'bar',
                            barGap: 0,
                            barMaxWidth:10,
                            barMinWidth:2,
                            stack: 'total',
                            emphasis: {
                                focus: 'series'
                            },
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                        offset: 0,
                                        color: '#60F5FF' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#3FA4FF' // 100% 处的颜色
                                    }], false),
                                    shadowBlur: 4,
                                }
                            },
                            data: showData
                        },
                        // {
                        //     name: 'Steppe',
                        //     type: 'bar',
                        //     emphasis: {
                        //         focus: 'series'
                        //     },
                        //     barMaxWidth:10,
                        //     barMinWidth:2,
                        //     stack: 'total',
                        //     data: [220, 182, 191, 234, 290],
                        //     itemStyle: {
                        //         normal: {
                        //             color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        //                 offset: 0,
                        //                 color: '#FF72A6' // 0% 处的颜色
                        //             }, {
                        //                 offset: 1,
                        //                 color: '#FF3657' // 100% 处的颜色
                        //             }], false),
                        //             shadowBlur: 4,
                        //         }
                        //     },
                        // }
                    ]
                },
                true
            );
        }
    }
};
</script>
<style lang="scss" scoped>
.question_chart {
    width: 100%;
    height: 100%;
}
</style>
